<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog"
  >
    <el-descriptions :column="1" v-loading="loading">
      <!--      <el-descriptions-item label="分账商户状态">-->
      <!--        <dict-tag :options="dict.type.split_merchant_status" :value="form.splitMerchantStatus"/>-->
      <!--      </el-descriptions-item>-->
      <el-descriptions-item label="业主开户">
        <el-button size="mini" @click="proprietorAccountDialog" v-if="form.splitMerchantStatus ==1">提交信息</el-button>
        <!--        <el-button size="mini" @click="proprietorAccountDialog" v-if="form.splitMerchantStatus ==2">编辑信息</el-button>-->
        <el-button size="mini" type="primary" v-if="['2','3'].includes(form.splitMerchantStatus)">已完成</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="结算银行卡">
        <el-button size="mini" @click="showSettlementBankCardDialog" :disabled="form.splitMerchantStatus == 1"
                   v-if="form.splitMerchantStatus !=3" v-hasPermi="['enterprise:proxyService:add']"
        >提交信息
        </el-button>
        <el-button size="mini" type="primary" v-if="form.splitMerchantStatus ==3">已完成</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="电子签认证状态">
        <span>{{ form.electronicVisaStatus == 1 ? '待认证' : (form.electronicVisaStatus == 2 ? '已认证' : '') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="电子签认证">
        <el-button size="mini" @click="showQrCode" v-if="form.electronicVisaStatus ==1"
                   v-hasPermi="['enterprise:proxyService:scanAuth']"
        >扫码认证
        </el-button>
        <el-button size="mini" type="primary" v-if="form.electronicVisaStatus ==2">已完成</el-button>
      </el-descriptions-item>
    </el-descriptions>

    <!--  二维码弹窗  -->
    <AuthCode :data="dataForm" v-model="authCodeDialogVisible" @input="getDetail"/>
    <!--  业主开户弹窗  -->
    <ProprietorAccount :data="dataForm" v-model="proprietorAccountDialogVisible" @success="getDetail"/>
    <!--  结算银行卡弹窗  -->
    <SettlementBankcard :data="dataForm" v-model="settlementBankcardDialogVisible" @success="getDetail"/>
  </el-dialog>
</template>

<script>
import AuthCode from '@/views/proprietorInfo/components/auth-code.vue'
import ProprietorAccount from '@/views/proprietorInfo/components/proprietor-account.vue'
import SettlementBankcard from '@/views/proprietorInfo/components/settlement-bankcard.vue'
import { debounce } from '@/utils'
import { getProxyServiceDetail } from '@/api/contract/proprietor'

export default {
  name: 'proxy-service',
  dicts: ['split_merchant_status'],
  components: {
    AuthCode,
    ProprietorAccount,
    SettlementBankcard
  },
  props: {
    title: {
      default: '房屋委托信息'
    },
    value: {
      default: false
    },
    data: {
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      // 业主开户弹窗
      proprietorAccountDialogVisible: false,
      // 结算银行卡弹窗
      settlementBankcardDialogVisible: false,
      // 二维码弹窗
      authCodeDialogVisible: false,
      form: {},
      dataForm: {},
      rules: {}
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getDetail()
    },
    // 重置表单
    reset() {
      this.form = {
        proprietorId: this.data.proprietorId//业主信息id
      }
    },
    getDetail() {
      this.loading = true
      getProxyServiceDetail(this.data.proprietorId).then(response => {
        this.form = response.data
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    // 显示业主开户信息弹窗
    proprietorAccountDialog() {
      this.dataForm = { ...this.form, ...this.data }
      this.proprietorAccountDialogVisible = true
    },
    // 显示结算银行卡弹窗
    showSettlementBankCardDialog() {
      this.dataForm = { ...this.form, ...this.data }
      this.settlementBankcardDialogVisible = true
    },
    // 显示二维码
    showQrCode() {
      this.dataForm = { ...this.form, ...this.data }
      this.authCodeDialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.mobile-tips {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

::v-deep .el-descriptions-item__container {
  display: flex;
  align-items: center;
}
</style>
